<template>
  <div class="main-app">
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="推送消息类型:">
          <el-select v-model="formInline.type" placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="状态:">
          <el-select v-model="formInline.status" placeholder="请选择">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh-right" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="show-result">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-message-solid"
            :disabled="disabled"
            @click="view"
          >
            查看详情
          </el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button icon="el-icon-bell" type="primary" @click="clear">一键清除未读</el-button>
        </el-form-item> -->
      </el-form>

      <div class="result">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          border
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          align="center"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="推送时间" width="160" >
            <template slot-scope="scope">
              {{ scope.row.createTime | parseDate }}
            </template>
          </el-table-column>


          <!-- <el-table-column label="推送消息类型">
            <template slot-scope="scope">
              <el-tag size="medium">{{ scope.row.type | parseType }}</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column label="推送消息类型" prop="type" width="120">
            <template slot-scope="scope">
              <el-tag style="width: 100%; text-align: center;" effect="dark" :class="'bg-'+scope.row.typeColor">
                {{ scope.row.typeName }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="推送消息标题" width="160" />
          <el-table-column prop="orgName" label="接收单位" />
          <el-table-column prop="receiverName" label="接收人" />
          <el-table-column prop="receiverPhone" label="接收人手机号" />
          <!-- <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag size="medium">{{
                scope.row.status | parseStatus
              }}</el-tag>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="状态" prop="status" width="100">
            <template slot-scope="scope">
              <el-tag style="width: 100%; text-align: center;" effect="dark" :class="'bg-'+scope.row.statusColor">{{
                scope.row.statusName
              }}</el-tag>
            </template>
          </el-table-column> -->
        </el-table>
        <div class="page">
          <el-pagination
            background
            :current-page.sync="currentPage"
            layout="total,prev, pager, next, sizes"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
    </div>

    <div class="dialog_diy">
      <el-dialog
        :visible.sync="dialogVisible"
        width="40%"
        style="margin-top: 50px"
      >
        <div slot="title" style="background: #1890ff; color: white">
          <div style="padding: 15px 20px">{{ title }}</div>
        </div>
        <el-form :model="form" label-width="250px" style="margin-top: 30px">
          <el-row style="margin-top: 20px;">
            <el-form-item label="推送消息类型:">
              {{ form.type }}
            </el-form-item>
            <el-form-item label="接收人:">
              {{ form.receiverName }}
            </el-form-item>
            <el-form-item label="推送时间:">
              {{ form.createTime | parseDate }}
            </el-form-item>
            <el-form-item label="接收人手机:">
              {{ form.receiverPhone }}
            </el-form-item>
          </el-row>
          <el-row style="width: 80%;">
            <el-form-item label="推送消息内容:">
              <el-input v-model="form.content" type="textarea" :rows="4" clearable disabled />
            </el-form-item>

          </el-row>

          <el-row style="margin-top: 20px; text-align: center">
            <el-form :inline="true" class="form-inline">
              <el-form-item>
                <el-button @click="closeDialog">返 回</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { pageMixin } from "../../mixins/index";
import { getList, getMessageById, clear } from "../../api/message";
import { MessageStatus, MessageType } from "../../utils/resource";
export default {
  filters: {
    parseDate(value) {
      if (value) {
        return value.replace("T", " ");
      }
    },
    parseStatus(value) {
      if (value != null) {
        return MessageStatus.find((p) => p.value === `${value}`).label;
      }
    },
    parseType(value) {
      console.log(value);
      if (value != null) {
        return MessageType.find((p) => p.value === value).label;
      }
    },
  },
  mixins: [pageMixin],
  data() {
    return {
      formInline: {
        type: "",
        status: "",
      },
      typeOptions: MessageType,
      statusOptions: MessageStatus,
      form: {
        type: "",
        receiverName: "",
        createTime: "",
        receiverPhone: "",
        content: "",
      },
      dialogVisible: false,
      title: "",
    };
  },
  computed: {
    deleteDisabled() {
      return this.ids.length === 0;
    },
  },
  async created() {
    await this.init();
  },
  methods: {
    async view() {
      await this.getMessageById(this.id);
      var obj = this.tableData.find((p) => p.id === `${this.id}`);
      if (obj) {
        this.title = "推送消息标题：" + obj.title;
      } else {
        this.title = "推送消息";
      }
      this.dialogVisible = true;
      await this.init();
      setTimeout(() => {
        this.$store.dispatch("user/getCount", { withoutAnimation: false });
      }, 500);
    },
    async clear() {
      await clear();
      await this.init();
      this.$message({
        type: "success",
        message: "清除成功!",
      });
      setTimeout(() => {
        this.$store.dispatch("user/getCount", { withoutAnimation: false });
      }, 500);
    },
    async reset() {
      this.formInline = {
        type: "",
        status: "",
      };
      await this.init();
    },
    async init() {
      this.tableData = [];
      this.loading = true;
      const { data, count } = await getList({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        messageType: this.formInline.type,
        status: this.formInline.status,
      });
      this.tableData = data;
      this.tableData.forEach(item => {
        var obj = MessageType.find((p) => p.value === `${item.type}`);
        if (obj) {
          item.typeName = obj.label;
          item.typeColor = obj.color;
        } else {
          item.typeName = "无数据";
          item.typeColor = "red";
        }

        var obj2 = MessageStatus.find((p) => p.value === `${item.status}`);
        if (obj2) {
          item.statusName = obj2.label;
          item.statusColor = obj2.color;
        } else {
          item.statusName = "无数据";
          item.statusColor = "red";
        }
      });
      this.total = count;
      this.loading = false;
    },
    async getMessageById(id) {
      const { data } = await getMessageById(id);
      this.form.type = this.parseType(data.type);
      this.form.receiverName = data.receiverName;
      this.form.createTime = data.createTime;
      this.form.receiverPhone = data.receiverPhone;
      this.form.content = data.content;
    },
    parseType(value) {
      console.log(value);
      if (value != null) {
        return MessageType.find((p) => p.value === value).label;
      }
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.result {
  margin-top: 10px;
}

.show-result {
  margin-top: 10px;
}

.dialog_diy {
  ::v-deep .el-dialog__wrapper {
    // eslint-disable-line
    .el-dialog {
      .el-dialog__body {
        padding: 0px;
      }

      .el-dialog__header {
        padding: 0px;
      }

      .el-dialog__headerbtn {
        top: 5px;
        right: 5px;
        padding-top: 10px;
      }

      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
        height: 30px;
        width: 35px;
      }

      .el-dialog__headerbtn .el-dialog__close:hover {
        color: gray;
      }
    }
  }
}
</style>
